<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, i，nitial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <title>EXCEL表格转手机通讯录vcard</title>
    <meta name="keywords" content="vcard,vcf,手机通讯录转换,电子表格转通讯录,EXCEL表格转手机通讯录vcard" />
    <meta name="description" content="一款在线EXCEL表格转手机通讯录vcard工具, 支持多种格式" />
    <script type="text/javascript" src="./xlsx.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft Yahei", Arial, sans-serif;
            overflow-x: hidden;
        }
        
        hr {
            height: 1px;
            margin: 10px 0;
            border: 0;
            clear: both;
            background-color: #e6e6e6;
        }
        
        a {
            color: #172b4d;
            text-decoration: none;
        }
        
        p {
            color: #172b4d;
        }
        
        a:hover {
            color: #777;
        }
        
        a cite {
            font-style: normal;
            *cursor: pointer;
        }
        
        .btn {
            display: inline-block;
            vertical-align: middle;
            font-size: 16px;
            text-align: center;
            padding: 10px 20px;
            border: none;
            border-radius: 2px;
            background-color: #172b4d;
            color: #fff;
            outline: none;
        }
        
        .btn:hover {
            opacity: 0.8;
            background-color: #fff;
        }
        
        .btn-radius {
            border-radius: 100px;
        }
        
        .btn-fluid {
            width: 100%;
        }
        
        .btn-primary {
            border: 1px solid #C9C9C9;
            background-color: #fff;
            color: #172b4d;
        }
        
        .btn-primary:hover {
            border-color: #172b4d;
            color: #172b4d
        }
        
        .box {
            padding-top: 60px;
            width: 52%;
            margin: 0 auto;
            text-align: center;
        }
        
        .upload-drag {
            border: 1px dashed #505f79;
            font-size: 16px;
            color: #505f79;
        }
        
        .slogan {
            width: 100%;
            padding-top: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }
        
        .slogan .title {
            font-size: 36px;
            color: #172b4d;
            padding: 10px 0;
            letter-spacing: 2px;
            font-weight: 600;
        }
        
        .slogan .description {
            font-size: 18px;
            color: #505f79;
            padding: 0 16px;
        }
        
        .footer {
            position: fixed;
            left: 0px;
            bottom: 20px;
            width: 100%;
        }
        
        .footer span {
            font-size: 14px;
            color: #7f8c8d;
        }
        
        @media screen and (max-width: 600px) {
            .box {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="slogan">
        <div class="title">EXCEL表格转手机通讯录</div>
        <div class="description">通过电子表格在线转成手机通讯录vcard</div>
    </div>
    <div class="box">
        <div class="upload-drag" id="upload-drag">
            <div onclick="javascript:document.getElementById('open').click();"> <svg t="1615349270465" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2650" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="80"> <defs> <style type="text/css"></style> </defs> <path d="M160 224 240 128 784 128 864 224 160 224ZM640 672 640 800 384 800 384 672 192 672 490.016 361.408C502.144 348.736 521.92 348.768 533.984 361.344L832 672 640 672ZM942.208 229.312 849.792 90.688C840 76 817.792 64 800.256 64L223.744 64C206.56 64 184.032 75.968 174.208 90.688L81.792 229.312C72 244 64 270.368 64 288.064L64 896.288C64 931.52 92.544 960 127.712 960L896.288 960C931.2 960 960 931.488 960 896.288L960 288.064C960 270.048 952.032 244.032 942.208 229.312" p-id="2651" fill="#505f79"></path> </svg>                </div> <input type="file" name="open" id="open" style="display: none" />
            <p> <a href="#" onclick="downloadTemplate();">下载模板</a> , 点击上传图标，或将文件拖拽到此处开始转换 </p>
        </div>
        <div class="footer"> <span>本站采用纯前端技术开发, 用户数据不经过互联网请求, 保护用户隐私安全，请放心使用</span> </div>
    </div>
    <script>
        function $(value) {
            return document.getElementById(value);
        }

        function readWorkbookFromLocalFile(file, callback) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var data = e.target.result;
                var workbook = XLSX.read(data, {
                    type: "binary",
                });
                if (callback) callback(workbook);
            };
            reader.readAsBinaryString(file);
        }

        function doSave(value, type, name) {
            var blob;
            if (typeof window.Blob == "function") {
                blob = new Blob([value], {
                    type: type,
                });
            } else {
                var BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder;
                var bb = new BlobBuilder();
                bb.append(value);
                blob = bb.getBlob(type);
            }
            var URL = window.URL || window.webkitURL;
            var bloburl = URL.createObjectURL(blob);
            var anchor = document.createElement("a");
            if ("download" in anchor) {
                anchor.style.visibility = "hidden";
                anchor.href = bloburl;
                anchor.download = name;
                document.body.appendChild(anchor);
                var evt = document.createEvent("MouseEvents");
                evt.initEvent("click", true, true);
                anchor.dispatchEvent(evt);
                document.body.removeChild(anchor);
            } else if (navigator.msSaveBlob) {
                navigator.msSaveBlob(blob, name);
            } else {
                location.href = bloburl;
            }
        }

        function downloadTemplate() {
            var data = [{
                "1": "小王",
                "2": "13500000000",
                "3": "",
                "4": "",
                "5": ""
            }, {
                "1": "小陈",
                "2": "13600000000",
                "3": "",
                "4": "",
                "5": ""
            }];
            var table = [];
            table.push({
                A: "姓名",
                B: "电话",
                C: "公司",
                D: "职位",
                E: "电子邮箱"
            });
            data.forEach(function(item) {
                var row = {
                    A: item["1"],
                    B: item["2"],
                    C: item["3"],
                    D: item["4"],
                    E: item["5"]
                };
                table.push(row);
            });
            var wb = XLSX.utils.book_new();
            var ws = XLSX.utils.json_to_sheet(table, {
                header: ["A", "B", "C", "D", "E"],
                skipHeader: true
            });
            ws['!cols'] = [{
                width: 15
            }, {
                width: 15
            }, {
                width: 15
            }, {
                width: 15
            }, {
                width: 15
            }];
            XLSX.utils.book_append_sheet(wb, ws, "vcard");
            XLSX.writeFile(wb, "template.xls");
        }

        function start(files) {
            var extName = files[0].name.split(".")[1];
            if (["xls", "xlsx"].indexOf(extName) == -1) {
                return alert("上传文件类型不正确");
            }
            readWorkbookFromLocalFile(files[0], function(workbook) {
                var sheetNames = workbook.SheetNames;
                var sheet = workbook.Sheets[sheetNames[0]];
                var data = XLSX.utils.sheet_to_json(sheet);
                data = JSON.parse(JSON.stringify(data).replace(/\s*/g, ""));
                var tmp = "";
                if (data.length != 0) {
                    for (var key in data) {
                        var card = "BEGIN:VCARD\nVERSION:3.0\nFN:" + data[key]["姓名"] + "\nTEL;CELL;VOICE:" + data[key]["电话"] + "\nORG:" + data[key]["公司"] + "\nTITLE:" + data[key]["职位"] + "\nEMAIL; INTERNET:" + data[key]["电子邮箱"] + "\nEND:VCARD\n";
                        tmp += card.replace(/undefined/g, "");
                    }
                    doSave(tmp, "text/latex", "联系人.vcf");
                } else {
                    return alert("没有检索到导入数据, 请检查导入文件格式");
                }
            });
        }
        var dz = $("upload-drag");
        dz.ondragover = function(ev) {
            ev.preventDefault();
            this.style.borderColor = "red";
        };
        dz.ondragleave = function() {
            this.style.borderColor = "gray";
        };
        dz.ondrop = function(ev) {
            this.style.borderColor = "gray";
            ev.preventDefault();
            var files = ev.dataTransfer.files;
            start(files);
        };
        $("open").addEventListener("change", function() {
            start($("open").files);
        });
    </script>
    <div style="display:none">
        <script type="text/javascript" src="//js.users.51.la/21080565.js"></script>
    </div>
</body>

</html>